<template>
  <view class="main">
    <!-- <view class="header"></view> -->
    <!-- <image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/activePost.png" alt="" /> -->
    <view class="bottom">
      <view class="btnBox">
        <button class="btn-1" @click="share">分享</button>
        <button class="btn-2" @click="orderActive">预约报名</button>
      </view>
    </view>
    <van-dialog
	width='60vw'

	  use-slot
	  :show="showDialog"
	  :show-confirm-button="false"
	  :closeOnClickOverlay='true'
	  @close="close"
    >
      <image
        src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/13_01.png"
      />
      <view class="dialogBottom">
        <image
          src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/dialogBottom.png"
          alt=""
        />
        <view class="box">
          <text class="bottomBtn-1"></text>
          <text class="bottomBtn-2"></text>
        </view>
      </view>
    </van-dialog>
	
   <view v-if="showToast" style="padding: 0" class="toast">
      <text> 参与活动人数已满，如有需要请联系工作人员</text>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
// import { useRouter } from "vue-router";
// import dialog from "../../components/dialog.vue";
import {getActive} from '../../common/api.js'

// const router = useRouter();
// const activeState = ref(true);
const showDialog = ref(false);
const showToast = ref(false);
const activeData = ref();

onMounted(() => {
  getActive({
    pageNo: 1,
    pageSize: 100,
    status: 1,
  }).then((res) => {
	  console.log('resss',res);
    activeData.value = res.data.data.list[0];
  });
});
const share = () => {
  showDialog.value = true;
};

const close = ()=>{
	console.log('222')
	showDialog.value = false
}
const orderActive = () => {

  if (
    activeData.value.userLimitCount - activeData.value.participateUsers <=
    0
  ) {
	showToast.value = true;
	setTimeout(()=>{
		showToast.value = false;
	},2000)
  } else {
	  uni.navigateTo({
	      url: 'activeOrder?activeId='+activeData.value.id+'&startTime='+activeData.value.startTime
	  })
    // router.push({
    //   name: "OrderActive",
    //   query: {
    //     activeId: activeData.value.id,
    //     startTime: activeData.value.startTime,
    //   },
    // });
  }
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  align-items: center;
  width: 100vw;
  height: 100vh;
    color: $color-text;
  // image {
  //   height: 93.78%;
  //   width: 100%;
  // }
  background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/activePost.png")
    no-repeat center center;
  background-size: cover;
  .header {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 14.29%;
    width: 100%;
    // background-color: red;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    height: 10.22%;
    width: 100%;

    background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/activeBottom.png")
      no-repeat center center;
    background-size: cover;
    .btnBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      //   width: 100%;
      padding: 0 7.46vw;
      button {
        height: 4.37vh;
        font-size: $font-size-medium;
        font-weight: bold;
        border-radius: 2.25rem;
        background-color: $color-text;
        color: $sys_theme;
        border: 0;
      }
      .btn-1 {
        width: 28.13vw;
      }
      .btn-2 {
        width: 48.93vw;
      }
    }
  }
}

::v-deep .van-popup--center {
  position: absolute;
  height: 35.83vh;
  border-radius: 2.67vw;
  image {
	  height: 100%;
    width: 100%;
  }
  .dialogBottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    height: 17.19%;
    width: 100%;
    padding: 0 7.33vw;
    background-color: #ffff;
	image{
		height: 57%;
	}
    .box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      background-color: red;
      opacity: 0;
      text {
        flex: 1;
      }
    }
  }
}
.toast{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
  width: 60vw !important;
  height: 10vh !important;
  // background-color: ;
  font-size: 3.73vw;
  min-height: 1.72vh;
  padding: 2.67vw;
  background-color: black;
  opacity: 0.5;
  border-radius: 3vw;
  text {
	  color: $color-text;
    line-height: 3vh;
    padding: 2.22vh 10vw;
  }
}

</style>